<!--
 * @Author: xiaotiwen
 * @Date: 2020-05-20 18:23:38
 * @LastEditTime: 2020-06-02 17:13:52
 * @LastEditors: xiaotiwen
 * @FilePath: \eduweb\src\views\practiceManagement\scheduleSetting\classroomInfo.vue
 * @Description: 教室详情
-->

<template>
    <div class="classroomInfo">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('scheduleSetting.title.pageTitle')" name="first">
                <ConditionCard shadow="never" body-style="padding: 24px 24px 6px 24px;" @search="onSubmit" @reset="reset('queryForm')">
                    <el-form ref="queryForm" :model="queryForm" label-position="right" label-suffix="：" label-width="120px">
                        <el-row :gutter="24" style="height: 50px;">
                            <el-col :span="8">
                                <el-form-item :label="$t('classroom.name')">
                                    <el-input v-model="queryForm.name" :placeholder="$t('inputPlaceholder')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('classroom.towerName')">
                                    <el-input v-model="queryForm.name" :placeholder="$t('inputPlaceholder')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('scheduleSetting.label.capacity')">
                                    <el-input v-model="queryForm.name" :placeholder="$t('inputPlaceholder')"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item :label="$t('message.type')">
                                    <el-select v-model="queryForm.calendarName" style="width: 100%" :placeholder="$t('message.plzSelect')" clearable>
                                        <el-option v-for="(item, idx) in options.calendarName" :key="idx"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </ConditionCard>
                <h2 class="classroomInfo_titles">{{$t('classroomTitle.classroomInfo')}}</h2>
                <el-table ref="tables" :data="data" :order="false" :selection="false" @row-click="rowClick" row-key>
                    <el-table-column width="55" align="center">
                        <template slot-scope="scope">
                            <el-radio v-model="queryForm.radio" :label="scope.$index">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column :min-width="item.width" :align="item.center" v-for="(item) in label" :key="item.props" :label="item.label" :prop="item.props" :sortable="item.sortable"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane :label="$t('scheduleSetting.label.nonClassRoomTitle')" name="second">
                <el-form :model="forms" ref="forms" class="classroomInfo_second_forms" label-width="120px">
                    <el-row>
                        <el-col :span="10">
                            <el-form-item :label="$t('classroom.name')">
                                <el-input v-model="forms.name" :placeholder="$t('inputPlaceholder')"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default {
    // 组件名称
    name: 'classroomInfo',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            activeName: 'first',
            queryForm: {
                name: '',
                calendarName: '',
                radio: ''
            },
            forms: {
                name: ''
            },
            test: '',
            data: [
                { name: 'adadsfasdfasdfsa', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 10000 }], number: 9999, status: 1, btnFlag: true },
                { name: 'adadsfasdfasdfsa', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 2, btnFlag: false },
                { name: 'adadsfasdfasdfsa', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 3, btnFlag: false },
                { name: 'adadsfasdfasdfsa', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 9999, status: 4, btnFlag: false },
                { name: 'adadsfasdfasdfsa', close: '机械学院', children: [{ name: '哈哈', number: 10000 }, { name: '哈哈', number: 99999 }], number: 8888, status: 5, btnFlag: false }
            ],
            label: [
                { label: this.$t('classroom.tower'), props: 'close', width: 100, center: '', sortable: true },
                { label: this.$t('courseSummary.classroom'), props: 'close', width: 100, center: 'center', sortable: true },
                { label: this.$t('message.type'), props: 'close', width: 100, center: 'center', sortable: true },
                { label: this.$t('scheduleSetting.label.capacity'), props: 'number', width: 120, center: 'center', sortable: true }
            ],
            options: {
                calendarName: []
            }
        };
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    /**
    * 在实例初始化之后，组件属性计算之前，如data属性等
    */
    created() {
    },
    /**
    * 在挂载开始之前被调用：相关的 render 函数首次被调用。
    */
    mounted() {
        this.data.forEach((item, idx) => {
            this.$set(item, 'indexs', idx);
        });
    },
    // 组件方法
    methods: {
        getForms() {
            let form = {};
            if (this.activeName === 'first') {
                form = this.queryForm;
            } else {
                form = this.forms;
            }
            return form;
        },
        rowClick(row, event, column) {
            this.queryForm.radio = row.indexs;
        }
    }
};
</script>
<style lang="scss" scoped>
.classroomInfo {
    &_titles {
        padding: 15px 40px;
        border-top: solid #ccc 1px;
        border-bottom: solid #ccc 1px;
        font-weight: bold;
    }
    &_second_forms {
        padding-top: 20px;
    }
}
</style>
